import React, { Component } from 'react';
import { Tabs, Grid } from 'antd-mobile';
import { Route, Link } from "react-router-dom";
import './classify.css';
import huawei from '../../api/index/huawei';
import rongyao from '../../api/index/glory';
import bijiben from '../../api/classify/bijiben';
import pingban from '../../api/classify/pingban';

class Classify extends Component {
    render() {
        return (
            <div>
                <ClassTab />
            </div>
        )
    }
}

// 左侧标签页
const tabs = [
    { title: '为您推荐' },
    { title: '华为手机' },
    { title: '荣耀手机' },
    { title: '笔记本电脑' },
    { title: '平板电脑' },
];

const ClassTab = () => (
    <div style={{ height: '38.5625rem' }}>
        <Tabs tabs={tabs}
            initalPage={'t2'}
            tabBarPosition="left"
            tabDirection="vertical"
            tabBarInactiveTextColor='#333'
            tabBarActiveTextColor='#e01d20'
            tabBarUnderlineStyle={{ borderColor: '#e01d20' }}
            tabBarTextStyle={{ fontSize: '1rem', width: '6.375rem' }}
        >
            <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', backgroundColor: '#fff' }}>
                <TuiJian />
                <ChaoZhi />
                <YiDong />
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', backgroundColor: '#fff' }}>
                <HuaWei />
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', backgroundColor: '#fff' }}>
                <RongYao />
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', backgroundColor: '#fff' }}>
                <BiJiBen />
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', backgroundColor: '#fff' }}>
                <PingBan />
            </div>
        </Tabs>
    </div>
);

//右侧 为您推荐
//热销推荐
class TuiJian extends Component {
    constructor() {
        super()
        this.state = {
            tuijianList: []
        }
    }

    componentDidMount() {
        huawei.then(res => {
            this.setState({
                tuijianList: res.data.data.slice(3, 9)
            })
        })
    }

    render() {
        let tuijian = this.state.tuijianList;
        let data1 = tuijian.map(item => {
            return {
                pimg: `${item.imgUrl[0]}`,
                pname: `${item.smallpname}`,
                pid: `${item.pid}`,
            }
        });
        return (
            <div className='tuijian'>
                <div className="sub-title">
                    <h3>热销推荐</h3>
                </div>
                <Grid data={data1} hasLine={false} columnNum={3} square={false}
                    renderItem={dataItem => (
                        <Link to={{ pathname: `/detail`, state: { id: dataItem.pid } }}>
                            <div>
                                <p>
                                    <img src={dataItem.pimg} className='am-grid-icon' alt="" />
                                </p>
                                <div>
                                    <span className='text'>{dataItem.pname}</span>
                                </div>
                            </div>
                        </Link>
                    )} />
            </div>
        )
    }
}

//超值精选
class ChaoZhi extends Component {
    constructor() {
        super()
        this.state = {
            pingbanList: []
        }
    }

    componentDidMount() {
        pingban.then(res => {
            this.setState({
                pingbanList: res.data.data.slice(6, 12)
            })
        })
    }

    render() {
        let pingban = this.state.pingbanList;
        let data2 = pingban.map(item => {
            return {
                pimg: `${item.imgUrl[0]}`,
                pname: `${item.smallpname}`,
                pid: `${item.pid}`,
            }
        });
        return (
            <div className='chaozhi'>
                <div className="sub-title">
                    <h3>超值精选</h3>
                </div>
                <Grid data={data2} hasLine={false} columnNum={3} square={false}
                    renderItem={dataItem => (
                        <Link to={{ pathname: `/detail`, state: { id: dataItem.pid } }}>
                            <div>
                                <p>
                                    <img src={dataItem.pimg} className='am-grid-icon' alt="" />
                                </p>
                                <div>
                                    <span className='text'>{dataItem.pname}</span>
                                </div>
                            </div>
                        </Link>
                    )} />
            </div>
        )
    }
}

//移动4G+专区
class YiDong extends Component {
    constructor() {
        super()
        this.state = {
            yidongList: []
        }
    }

    componentDidMount() {
        rongyao.then(res => {
            this.setState({
                yidongList: res.data.data.slice(7, 10)
            })
        })
    }

    render() {
        let yidong = this.state.yidongList;
        let data3 = yidong.map(item => {
            return {
                pimg: `${item.imgUrl[0]}`,
                pname: `${item.smallpname}`,
                pid: `${item.pid}`,
            }
        });
        return (
            <div className='yidong'>
                <div className="sub-title">
                    <h3>移动4G+专区</h3>
                </div>
                <Grid data={data3} hasLine={false} columnNum={3} square={false}
                    renderItem={dataItem => (
                        <Link to={{ pathname: `/detail`, state: { id: dataItem.pid } }}>
                            <div>
                                <p>
                                    <img src={dataItem.pimg} className='am-grid-icon' alt="" />
                                </p>
                                <div>
                                    <span className='text'>{dataItem.pname}</span>
                                </div>
                            </div>
                        </Link>
                    )} />
            </div>
        )
    }
}

//右侧 华为手机
class HuaWei extends Component {
    constructor() {
        super()
        this.state = {
            huaweiList: []
        }
    }

    componentDidMount() {
        huawei.then(res => {
            this.setState({
                huaweiList: res.data.data
            })
        })
    }

    render() {
        let huawei = this.state.huaweiList;
        let data4 = huawei.map(item => {
            return {
                pimg: `${item.imgUrl[0]}`,
                pname: `${item.smallpname}`,
                pid: `${item.pid}`,
            }
        });
        return (
            <div className='huawei'>
                <div className="sub-title">
                    <h3>华为手机</h3>
                </div>
                <Grid data={data4} hasLine={false} columnNum={3} square={false}
                    renderItem={dataItem => (
                        <Link to={{ pathname: `/detail`, state: { id: dataItem.pid } }}>
                            <div>
                                <p>
                                    <img src={dataItem.pimg} className='am-grid-icon' alt="" />
                                </p>
                                <div>
                                    <span className='text'>{dataItem.pname}</span>
                                </div>
                            </div>
                        </Link>
                    )} />
            </div>
        )
    }
}

//右侧 荣耀手机
class RongYao extends Component {
    constructor() {
        super()
        this.state = {
            rongyaoList: []
        }
    }

    componentDidMount() {
        rongyao.then(res => {
            this.setState({
                rongyaoList: res.data.data
            })
        })
    }

    render() {
        let rongyao = this.state.rongyaoList;
        let data5 = rongyao.map(item => {
            return {
                pimg: `${item.imgUrl[0]}`,
                pname: `${item.smallpname}`,
                pid: `${item.pid}`,
            }
        });
        return (
            <div className='rongyao'>
                <div className="sub-title">
                    <h3>荣耀手机</h3>
                </div>
                <Grid data={data5} hasLine={false} columnNum={3} square={false}
                    renderItem={dataItem => (
                        <Link to={{ pathname: `/detail`, state: { id: dataItem.pid } }}>
                            <div>
                                <p>
                                    <img src={dataItem.pimg} className='am-grid-icon' alt="" />
                                </p>
                                <div>
                                    <span className='text'>{dataItem.pname}</span>
                                </div>
                            </div>
                        </Link>
                    )} />
            </div>
        )
    }
}

//右侧 笔记本电脑
class BiJiBen extends Component {
    constructor() {
        super()
        this.state = {
            bijibenList: []
        }
    }

    componentDidMount() {
        bijiben.then(res => {
            this.setState({
                bijibenList: res.data.data
            })
        })
    }

    render() {
        let bijiben = this.state.bijibenList;
        let data6 = bijiben.map(item => {
            return {
                pimg: `${item.imgUrl[0]}`,
                pname: `${item.smallpname}`,
                pid: `${item.pid}`,
            }
        });
        return (
            <div className='bijiben'>
                <div className="sub-title">
                    <h3>笔记本电脑</h3>
                </div>
                <Grid data={data6} hasLine={false} columnNum={3} square={false}
                    renderItem={dataItem => (
                        <Link to={{ pathname: `/detail`, state: { id: dataItem.pid } }}>
                            <div>
                                <p>
                                    <img src={dataItem.pimg} className='am-grid-icon' alt="" />
                                </p>
                                <div>
                                    <span className='text'>{dataItem.pname}</span>
                                </div>
                            </div>
                        </Link>
                    )} />
            </div>
        )
    }
}


//右侧 平板电脑
class PingBan extends Component {
    constructor() {
        super()
        this.state = {
            pingbanList: []
        }
    }

    componentDidMount() {
        pingban.then(res => {
            this.setState({
                pingbanList: res.data.data
            })
        })
    }

    render() {
        let pingban = this.state.pingbanList;
        let data7 = pingban.map(item => {
            return {
                pimg: `${item.imgUrl[0]}`,
                pname: `${item.smallpname}`,
                pid: `${item.pid}`,
            }
        });
        return (
            <div className='pingban'>
                <div className="sub-title">
                    <h3>平板电脑</h3>
                </div>
                <Grid data={data7} hasLine={false} columnNum={3} square={false}
                    renderItem={dataItem => (
                        <Link to={{ pathname: `/detail`, state: { id: dataItem.pid } }}>
                            <div>
                                <p>
                                    <img src={dataItem.pimg} className='am-grid-icon' alt="" />
                                </p>
                                <div>
                                    <span className='text'>{dataItem.pname}</span>
                                </div>
                            </div>
                        </Link>
                    )} />
            </div>
        )
    }
}

export default Classify
